<template>
    <div class="common-layout">
        <el-container>
            <!-- <el-header style="display: flex; align-items: center;">
                <div class="item-text" style="flex: 1;"></div>
                <div style="flex: 1;">
                    <el-row align="middle" :gutter="20" justify="start">
                        <el-col :span="8">
                            <el-input v-model="searchModel.Code" placeholder="订单编号或编码" clearable
                                style="width: 240px; height: 35px; font-size: 15px; padding: 0 15px;"
                                @keyup.enter.native="SearchList" />
                        </el-col>
                        <el-col :span="4" style="display: flex; align-items: center; justify-content: flex-start;">
                            <el-button type="primary" @click="SearchList"
                                style="height: 35px; font-size: 30px; padding: 0 20px; cursor: pointer; min-width: 100px;">
                                <i class="el-icon-search"></i>搜索
                            </el-button>
                        </el-col>
                        <el-col :span="4" style="display: flex; align-items: center; justify-content: flex-start;">
                            <el-button type="success" @click="SearchList"
                                style="height: 35px; font-size: 30px; padding: 0 20px; cursor: pointer; min-width: 100px;">
                                <i class="el-icon-refresh"></i>刷新
                            </el-button>
                        </el-col>
                        <el-col :span="4" style="display: flex; align-items: center; justify-content: flex-start;">
                            <el-button type="success" @click="toggleAmount"
                                style="height: 35px; font-size: 30px; padding: 0 20px; cursor: pointer; min-width: 100px;">
                                {{ showResultSection ? '取消运算' : '运算' }}
                            </el-button>
                        </el-col>
                    </el-row> 
                </div>
            </el-header> -->

            <div class="view-header" style="display: flex; justify-content: space-between;margin-top: 15px;">
                <div class="desc-text">
                    <i class="el-icon-s-grid" />
                    <span>销售订单列表</span>
                </div>
                <div>
                   <el-input v-model="searchModel.Code" placeholder="订单编号或编码" clearable
                                style="width: 240px; height: 35px; font-size: 15px; padding: 0 15px;"
                                @keyup.enter.native="SearchList" />
                    <el-button type="primary" @click="SearchList">
                        <i class="el-icon-search"></i>搜索
                    </el-button>
                    <el-button type="success" @click="SearchList">
                        <i class="el-icon-refresh"></i>刷新
                    </el-button>
                    <el-button type="success" @click="toggleAmount"
                        style="height: 35px; font-size: 30px; padding: 0 20px; cursor: pointer; min-width: 100px;">
                        {{ showResultSection ? '取消运算' : '运算' }}
                    </el-button>
                </div>
            </div>

            <div class="mian-flex">
                <!-- 订单列表 -->
                <div class="ttable-info mes-table" v-loading="loading">
                    <!-- <div class="section-title">销售订单列表</div> -->

                    <!-- 表格滚动容器 -->
                    <div class="table-scroll-wrapper">
                        <el-table
                            :data="detailTableData"
                            stripe
                            border
                            style="width: 100%;"
                            max-height="550"
                        >
                            <!-- 序号列 -->
                            <el-table-column type="index" width="50" />
                            <!-- 选择列 -->
                            <el-table-column type="selection" width="50" align="center" />
                            <!-- 单据编号列，点击显示订单明细 -->
                            <el-table-column label="单据编号" prop="code" width="150" align="center">
                                <template #default="scope">
                                    <el-link type="primary" @click="showOrderDetail(scope.row)">
                                        {{ scope.row.code }}
                                    </el-link>
                                </template>
                            </el-table-column>
                            <el-table-column prop="voucherDate" label="单据日期" width="250" align="center" />
                            <el-table-column prop="businessTypeName" label="业务类型" width="150" align="center" />
                            <el-table-column prop="customerName" label="客户" width="250" align="center" />
                            <el-table-column prop="settleCustomerName" label="结算客户" width="150" align="center" />
                            <el-table-column prop="departmentName" label="部门名称" width="120" align="center" />
                            <el-table-column prop="clerkName" label="业务员" width="120" align="center" />
                            <el-table-column prop="logisticsStatusName" label="状态" width="120" align="center" />
                            <el-table-column prop="reciveTypeName" label="收款方式" width="120" align="center" />
                            <el-table-column prop="discountRate" label="费率" width="120" align="center" />
                            <el-table-column prop="maker" label="制单人" width="120" align="center" />
                            <el-table-column prop="remark" label="备注" width="120" align="center" />
                            <el-table-column prop="createdTime" label="创建时间" width="200" align="center" />
                        </el-table>
                    </div>

                    <div class="demo-pagination-block table-pagination"
                        style="display: flex; justify-content: flex-end;">
                        <el-pagination
                            v-model:current-page="currentPage"
                            v-model:page-size="pageSize"
                            :page-sizes="[15, 30, 50, 80, 100]"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalCount"
                            @current-change="handleCurrentChange"
                            @size-change="handleSizeChange"
                        />
                    </div>

                </div>

                <!-- 订单明细弹窗 -->
                <el-dialog v-model="detailDialogVisible" class="fixed-size-dialog" width="80%" :before-close="handleClose">
                    <!-- 自定义标题 -->
                    <template #title>
                        <div style="display: flex; flex-direction: column;">
                            <span style="font-size: 20px; font-weight: bold;">订单明细</span>
                        </div>
                    </template>
                    
                    <div class="dialog-body">
                        <div class="form-section">
                            <!-- 上部分表单 -->
                            <el-form :model="orderDetail" label-width="120px" class="order-detail-form" label-position="right">
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="订单编号:">
                                            <el-input v-model="orderDetail.code" disabled />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="单据日期:">
                                            <el-input v-model="orderDetail.voucherDate" disabled />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="业务类型:">
                                            <el-input v-model="orderDetail.businessTypeName" disabled />
                                        </el-form-item>
                                    </el-col> 
                                    <el-col :span="12">
                                        <el-form-item label="单据状态:">
                                            <el-input v-model="orderDetail.voucherStateName"  disabled />
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>

                            <!-- 下部分表单 -->
                            <el-form v-if="orderInfodetail.length > 0" :model="orderInfodetail[0]" label-width="120px" class="order-detail-form"
                                label-position="right">
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="制单人:">
                                            <el-input v-model="orderInfodetail[0].maker" disabled />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="修改人:">
                                            <el-input v-model="orderInfodetail[0].reviser" disabled />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="审核人:">
                                            <el-input v-model="orderInfodetail[0].auditor" disabled />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="审核日期:">
                                            <el-input v-model="orderInfodetail[0].auditedDate" disabled />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="24">
                                        <el-form-item label="备注:">
                                            <el-input v-model="orderInfodetail[0].remark" type="textarea" disabled />
                                        </el-form-item>
                                    </el-col> 
                                </el-row>
                            </el-form>
                        </div>
                    </div>

                    <!-- 分割线 -->
                    <div style="margin: 10px 0; border-bottom: 1px solid #dcdfe6;"></div>

                    <!-- 下部分：订单明细表格 -->
                    <div class="table-section">
                        <el-table :data="orderInfodetail" style="width: 100%;" stripe border>
                            <el-table-column type="selection" width="55" />
                            <el-table-column prop="inventoryName" label="存货名称" width="150">
                                <template #default="scope">
                                    <span v-if="scope.row.inventoryName">
                                        {{ scope.row.inventoryName }}
                                    </span>
                                    <span v-else style="color: red; font-weight: bold;">
                                        null
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="quantity" label="数量" width="100" />
                            <el-table-column prop="compositionQuantity" label="组合单位" width="100" />
                            <el-table-column prop="origDiscountPrice" label="单价" width="140" />
                            <el-table-column prop="origTaxPrice" label="含税单价" width="200" />
                            <el-table-column prop="origDiscountAmount" label="金额" width="150" />
                            <el-table-column prop="origTax" label="税额" width="120" />
                            <el-table-column prop="origTaxAmount" label="含税金额" width="200" />
                            <el-table-column prop="origDiscount" label="折扣金额" width="200" />
                            <el-table-column prop="deliveryDate" label="预计交货日期" width="200" />
                            <el-table-column prop="executableQuantity" label="未执行数量" width="200" />
                            <el-table-column prop="detailMemo" label="备注" width="200" />
                            <el-table-column prop="returnReason" label="退货原因" width="200" />
                        </el-table>
                    </div>

                    <template #footer>
                        <el-button @click="detailDialogVisible = false">关闭</el-button>
                    </template>
                </el-dialog>

            </div>

            <!-- 运算结果展示区 -->
            <div class="result-section" v-if="showResultSection">
                <div class="section-title">订单列表 - 合计</div>
                <el-table :data="tableData" style="width: 100%;">
                    <el-table-column type="index" width="50" />
                    <el-table-column type="selection" width="55" />
                    <el-table-column property="orderCode" label="订单编号" width="200" />
                    <el-table-column property="orderName" label="订单名称" width="250" />
                    <el-table-column property="orderAmount" label="订单金额" width="200" />
                    <el-table-column property="createdTime" label="创建时间" width="200" />
                    <el-table-column property="ceshi1" label="测试字段1" width="200" />
                    <el-table-column property="ceshi2" label="测试字段2" width="200" />
                    <el-table-column property="ceshi3" label="测试字段3" width="200" />
                </el-table>
            </div>
        </el-container>
    </div>
</template>

<script setup>
import { ref, watch, computed} from 'vue'
import { ElMessage } from 'element-plus'
import { SaleSearchList, SaleDetailSearchList, SaleInfoSearch } from '../../extension/V2/SaleOrderInfo'

// 搜索条件模型
const searchModel = ref({ Code: '' })

// 表格数据与分页数据
const tableData = ref([])
const detailTableData = ref([]) // 订单展示明细模型
const detailDialogVisible = ref(false)
const orderDetail = ref({})
const showResultSection = ref(false)
let loading = ref(false)

const totalCount = ref(0)
const currentPage = ref(1)
const pageSize = ref(15)

const orderInfodetail = ref([])

// 获取当前分页+搜索参数
const getParams = () => ({
    Code: searchModel.value.Code,
    page: currentPage.value,
    rows: pageSize.value
})

// 分页页码变化
const handleCurrentChange = (page) => {
    currentPage.value = page
    Search()
}

// 分页每页条数变化
const handleSizeChange = (size) => {
    pageSize.value = size
    currentPage.value = 1
    Search()
}

// 查询方法 (分页变化)
const Search = async () => {
    loading = true
    const params = getParams()
    console.log("已执行params：",params)
    
    try {
        const result = await SaleInfoSearch(params)
        if (result.status === 0) {
            detailTableData.value = result.rows || []
            totalCount.value = result.total || 0
            loading = false
        } else {
            detailTableData.value = []
            totalCount.value = 0
            ElMessage.error(result.msg || '查询失败')
        }
    } catch (error) {
        console.error('查询异常:', error)
    }
}

// 搜索按钮
const SearchList = async () => {
    const result = await SaleInfoSearch({ Code: searchModel.value.Code })
    if (result.status === 0) {
        detailTableData.value = result.rows
        totalCount.value = result.total
    } else {
        detailTableData.value = []
        totalCount.value = 0
        ElMessage.error(result.msg || '查询失败')
    }
}

// 运算
const toggleAmount = () => { showResultSection.value = !showResultSection.value }

// 订单明细下部分
const showOrderDetailData = async () => {
    const id = orderDetail.value.id
    const result = await SaleDetailSearchList(id)
    orderInfodetail.value = result.rows
}

// 订单明细上部分
const showOrderDetail = (row) => {
    orderDetail.value = { ...row }
    detailDialogVisible.value = true
    showOrderDetailData()
}

// 弹窗滚动控制
watch(() => detailDialogVisible.value, (val) => {
    document.body.style.overflow = val ? 'hidden' : ''
})

// 初始化
Search()
</script>

<style scoped>
.table-container {
    /* background-color: #ffffff; */
    /* border: 1px solid #ebeef5; */
    border-radius: 10px;
    /* padding: 20px; */
    /* margin-bottom: 30px; */
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */
}

/* 表格滚动容器 */
.table-scroll-wrapper {
    /* height: 500px; */
    /* 固定表格高度 */
    overflow: auto;
    /* 表体滚动 */
}

/* 表头固定 */
/* .el-table th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
} */

/* 表格文字居中 */
::v-deep(.el-table th, .el-table td) {
    text-align: center;
}

/* 其他样式保持不变 */
.section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #333;
    padding-bottom: 6px;
    border-bottom: 2px solid #333;
    display: inline-block;
}
</style>

<style lang="less" scoped>
@import "@/assets/css/index.less";
::v-deep {
    .el-container {
        display: block;
    }
    .el-table thead {
        color: #616161 !important;
    }
    .el-table th.el-table__cell {
        background-color: #f8f8f9 !important;
    }
}
</style>
